<template>
	<view>
		<view class="u-flex u-flex-center tab bg-white">
			<view class="u-p-30 text-center u-rela e-flex-1 fw-600" @tap="tabIndex = 1" :class="{ 'tab-active': tabIndex === 1 }">
				{{ $t('yuncang.套餐规格') }}
			</view>
			<view class="u-p-30 text-center u-rela e-flex-1 fw-600" @tap="tabIndex = 2" :class="{ 'tab-active': tabIndex === 2 }">
				{{ $t('yuncang.套餐介绍') }}
			</view>
		</view>
		<view class="content">
			<view  v-show="tabIndex === 1">
				<view class="u-flex sku-box" v-for="(item, index) in commoditys" :key="index">
					<image mode="aspectFill" class="img-80 u-m-r-20" :src="$fullLink(item.commodityPhoto)"></image>
					<view class="e-flex-1">
						<view class="u-flex u-flex-between">
							<view class="sku-name u-line-1">
								{{ item.commodityName }}
							</view>
							<text class="c-47">x{{ item.commodityQty }}</text>
						</view>
						<view class="u-flex u-flex-between u-font-24">
							<view class="u-flex">
								<view class="c-red u-m-r-10">
									{{$unitEn}}{{item.commodityPrice}}
								</view>
								<text class="c-47">{{$t('yuncang.零售价')}}</text>
							</view>
							<text class="c-b1">{{ $t('layout.已售') }} {{ item.commodityStockSold || 0 }} {{ $t('classify.件') }}</text>
						</view>
					</view>
				</view>
			</view>
			<rich-text :nodes="richText" v-show="tabIndex === 2"></rich-text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		info: Object
	},
	data() {
		return {
			tabIndex: 1
		}
	},
	computed: {
		richText() {
			return this.info?.params?.text.content ? this.info.params.text.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display: block;" ') : ''
		},
		commoditys () {
			return this.info.params?.commoditys || []
		}
	}
}
</script>
<style scoped lang="scss">
.tab {
	> view {
		&:first-child {
			&::after {
				content: '';
				position: absolute;
				width: 2rpx;
				height: 48rpx;
				background: #e3e4e6;
				right: 0;
				top: calc(50% - 24rpx);
			}
		}
	}
	.tab-active {
		&::before {
			content: '';
			position: absolute;
			width: 64rpx;
			height: 6rpx;
			background: var(--color-primary);
			border-radius: 3rpx;
			bottom: 0;
			left: calc(50% - 32rpx);
		}
	}
}
.content {
	min-height: 316rpx;
	.sku-box{
		padding: 32rpx 52rpx 32rpx 48rpx;
	}
	.sku-name {
		width: 252rpx;
	}
	.c-47 {
		color: #474f59;
	}
	.c-b1{
		color: #B1B1B3;
	}
}
</style>
